<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .flex-container {
      /* 布局方式：弹性布局，元素自身以行内块元素呈现 */
      display: inline-flex;
      /* 定义主轴方向，可选值：row、row-reverse、column、column-reverse */
      flex-direction: row-reverse;
      padding: 10px;
      background-color: skyblue;
    }
    .flex-item {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 30px;
      color: #fff;
      text-align: center;
      background-color: tomato;
      margin: 10px;
    }
  </style>
<body>
    <!-- 
        TIP
        flex-direction 属性决定了 Flex 容器的主轴方向，即 Flex 项目的排列方向
        默认主轴方向就是 x 轴，水平向右
        默认交叉轴就是 y 轴，垂直向下 
        
        row	（默认值）主轴为水平方向，起点在左端。（即：交叉轴在垂直方向，起点在上边框位置
        row-reverse	主轴为水平方向，起点在右端。（即：交叉轴在垂直方向，起点在元素上边框位置）
        column	主轴为垂直方向，起点元素上边框位置。（即：交叉轴为水平方向，起点在左端）
        column-reverse	主轴为垂直方向，起点在下沿。 (即：交叉轴为水平方向，起点在左端 ）
    -->

    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
</body>
</html>